<template>
  <vol-box
    :lazy="true"
    v-model="model"
    title="生产领用单明细"
    :height="400"
    :width="1200"
    :padding="5"
    :onModelClose="onModelClose"
  >
    <div class="box">
      <div class="bottomBox">
        <!-- <p class="smallTitle">生产领用单明细</p> -->
        <el-table
          ref="table"
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: `#f8f8f9`, color: `#616161` }"
          border
          @selection-change="handleSelectionChange"
          @cell-click="purchaseApplicationVoucherFn"
          @row-click="clickRow"
        >
          <el-table-column type="selection" width="55">
            <!-- :selectable="changeSelectable" -->
          </el-table-column>
          <el-table-column prop="Goods_sub" label="配件编码" width="200">
          </el-table-column>

          <el-table-column prop="Goods_name" label="配件名称" width="120">
          </el-table-column>
          <el-table-column
            prop="AvailableQuantity"
            label="可用数量"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="Goods_num" label="领用数量" width="100">
          </el-table-column>

          <el-table-column prop="Cost_price" label="成本价" width="120">
          </el-table-column>
          <el-table-column prop="Goods_size" label="规格" width="100">
          </el-table-column>
          <el-table-column prop="WHSE_name" label="库位名称" width="100">
          </el-table-column>
          <el-table-column prop="Remark" label="备注"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <template #footer>
      <div>
        <el-button type="primary" size="small" @click="onSelect"
          >确认</el-button
        >
      </div>
    </template>
  </vol-box>
</template>
    
    <script>
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: {
    "vol-box": VolBox,
  },
  data() {
    return {
      model: false,
      tableData: [],
      form: {},
      options: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectList: [],
    };
  },
  methods: {
    onModelClose() {
      this.tableData = [];
      this.currentPage = 1;
      this.pageSize = 10;
      this.total = 0;
      this.ID = null;
    },
    open(ID) {
      this.ID = ID;
      this.model = true;
      this.qureyBtnFn(ID);
    },
    onSelect() {
      let selectionRows = this.$refs.table.getSelectionRows();
      console.log("selectionRows", selectionRows);
      this.$emit("parentCall", ($parent) => {
        let detailRowData = $parent.$refs.detail.rowData;
        let arr = [];
        let stringName = "";
        detailRowData.forEach((item) => {
          selectionRows.forEach((j) => {
            
            if (j.goodsInventoryWarehouseXm == item.goodsInventoryWarehouseXm) {
              stringName += stringName ? "," + j.Goods_name : j.Goods_name;
              arr.push(j.goodsInventoryWarehouseXm);
            }
          });
        });
        if (stringName != "") {
          console.log(stringName);
          this.$message.warning("明细表已存在 " + stringName);
        }
        arr.forEach((item) => {
          let index = selectionRows.findIndex(
            (x) => x.goodsInventoryWarehouseXm == item
          );
          if (index != -1) {
            selectionRows.splice(index, 1);
          }
        });
        let newArr = selectionRows.map(item=>{
            item.AvailableQuantity=item.Goods_num
            item.Type = 0
            return item
        })
        console.log("newArr",newArr);
        $parent.$refs.detail.rowData.unshift(...newArr);
        this.onModelClose();
        return (this.model = false);
      });
    },

    voucherKeyup(v) {
      if (v.keyCode == 13) {
        this.qureyBtnFn();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.detailPurchaseApplicationOpen();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.detailPurchaseApplicationOpen();
    },
    handleSelectionChange(val) {
    //   this.multipleSelection = val;
      this.selectList=val
    },
    async purchaseApplicationVoucherFn(row, column, event) {
      if (column.label == "单据编码") {
        if (row.AuditStatus == 1) {
          this.voucherSub = await row.Voucher_sub;
          this.ID = row.Purchase_application;
          this.onSubmit();
          this.dialogVisible = true;
        } else {
          this.$message.warning("采购单未审核通过");
        }
      }
    },
    clickRow(row) {
        console.log(this.selectList);
      const selected = this.selectList.some((item) => item.Goods_sub === row.Goods_sub);
      console.log("selected",selected);
      try {
        if (!selected) {
        // 选择
        this.selectList.push(row);
        this.$refs.table.toggleRowSelection(row, true);
      } else {
        // 取消
        var finalArr = this.selectList.filter((item) => {
          return item.Goods_sub !== row.Goods_sub;
        });
        // 取消后剩余选中的
        this.selectList = finalArr;
        this.$refs.table.toggleRowSelection(row, false);
      }
      } catch (error) {
        console.error(error)
      }
    },
    async qureyBtnFn(ID) {
      let url = "api/q_produce_use/getDetailPage";
      let wheresParams = [];
      if (this.form.voucher) {
        let obj = {
          name: "Voucher_sub",
          value: this.form.voucher,
          displayType: "like",
        };
        wheresParams.push(obj);
      }
      if (this.form.state) {
        let obj = {
          name: "AuditStatus",
          value: this.form.state,
          displayType: "select",
        };
        wheresParams.push(obj);
      }
      let wheres = JSON.stringify(wheresParams);
      let param = {
        order: "desc",
        page: this.currentPage,
        rows: this.pageSize,
        // page: 1,
        // rows: 100,
        sort: "Goods_sub",
        value: ID,
        wheres: wheres,
      };
      await this.http.post(url, param, "").then((res) => {
        try {
          console.log("res", res);
          this.total = res.total;
          if (res.rows.length) {
            this.tableData = res.rows;
          }
        } catch (error) {
          console.error(error);
        }
      });
    },
  },
};
</script>
    
<style scoped lang="less">
::v-deep .el-dialog {
  padding: 10px;
}
.btnFather {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 3px;
  .btnBox {
    line-height: 40px;
    width: 70px;
    margin: 6px 30px;
    /* border-radius: 70px; */
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    /* border: 1px solid #dcdfe6; */
    /* background-color: #f5f7fa; */
  }
  .btnBoxIndex {
    color: #409eff;
    border-bottom: 2px solid #409eff;
    /* background-color: #ecf5ff; */
  }
}
.block {
  display: flex;
  justify-content: right;
}
.purchase_state {
  border-radius: 7px;
  padding: 2px;
  font-size: 12px;
}
.purchase_stateZero {
  color: red;
  background-color: rgba(240, 13, 48, 0.2);
  border: 1px solid rgba(240, 13, 48, 0.3);
}
.purchase_stateOne {
  color: rgb(239, 180, 111);
  background-color: rgba(239, 180, 111, 0.2);
  border: 1px solid rgba(239, 180, 111, 0.3);
}
.purchase_stateTwo {
  color: rgb(64, 158, 255);
  background-color: rgba(64, 158, 255, 0.2);
  border: 1px solid rgba(64, 158, 255, 0.3);
}
.purchase_stateThree {
  color: rgb(7, 217, 63);
  background-color: rgba(7, 217, 63, 0.2);
  border: 1px solid rgba(7, 217, 63, 0.3);
}
.el-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.el-form > div {
  margin-bottom: 20px;
  margin-top: 20px;
  margin-right: 10px;
  .submitBtn {
    width: 80px;
  }
}
.el-form--inline .el-form-item {
  width: 45%;
}
.box {
  height: 590px;
  overflow: auto;
}
.topBox {
  padding: 20px 0;
  border-bottom: 1px solid #eaeaea;
}
.el-icon-search {
  display: inline-block;
}
.topBox,
.demo-input-suffix {
  display: flex;
  line-height: 31px;
}
.demo-input-suffix {
  width: 40%;
  margin-left: 10px;
}
label {
  width: 160px;
  text-align: right;
}
.el-select {
  width: 65%;
}
.qureyBtn {
  margin-left: 30px;
  padding: 0 30px;
}
.bottomBox {
  padding: 5px;
  height: 100%;
  overflow: auto;
}

.footBox {
  float: right;
  padding: 10px 20px;
}
.confirmBtn {
  padding: 0 20px;
  pointer-events: none;
}
.smallTitle {
  color: #5d5c5c;
  font-weight: 600;
}
</style>